<template>
  <div class="container2">
    <!-- 客户其他地址dialog-->
    <el-dialog
      :title="title"
      width="800px"
      class="tableDialog"
      :close-on-click-modal="false"
      v-dialogDrag
      :visible.sync="viewVisible"
    >
      <section class="title">
        <p>{{ addressForm.names }}</p>
        <p>
          <el-button
          size="mini"
          type="primary"
          class="add-btn"
          @click="init('add',addressForm)"
          v-if="hasPermission('company:company:add')"
        >新增</el-button
        ></p>
      </section>

      <el-table
        size="mini"
        v-loading="loading"
      :data="tableData"
      style="width: 100%; margin-top: 10px"
      border
      :header-cell-style="{
      'background-color': '#eeeeee !important',
      }"
      :row-class-name="tableRowClassName"
      >
      <el-table-column type="index" label="序号" width="60">
      </el-table-column>
      <el-table-column prop="" label="收货地址" min-width="250">
        <template slot-scope="scope">
          <section>
            {{ scope.row.addressNames }}
            {{ scope.row.detailAddress }}

            <span v-if="scope.row.isDefault === '1'" class="default"
            >默认</span
            >
            <span v-else style="color: #999999;margin-left: 20px;">默认</span>
          </section>
        </template>
      </el-table-column>
      <el-table-column p label="操作" width="112px">
        <template slot-scope="scope">
          <el-link
            type="primary"
            :underline="false"
            @click="init('edit', scope.row)"
            v-if="hasPermission('company:company:edit')"
          >修改</el-link
          >
          <el-link type="primary" :underline="false" @click="del(scope.row.id)"
                   v-if="hasPermission('company:company:delete')"
          >删除</el-link>
        </template>
      </el-table-column>
      </el-table>
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-size="page.pageSize"
        :current-page="page.pageNo"
        layout="total,sizes,prev, pager, next, jumper"
        :total="page.total"
      >
      </el-pagination>
    </el-dialog>
    <div class="editForm-wrapper">
    <el-dialog
      class="addressDialog"
      :title="editTitle"
      :close-on-click-modal="false"
      v-dialogDrag
      :visible.sync="editVisible"
    >
      <el-form
        label-width="93px"
        :rules="dataRule"
        ref="editForm"
        :model="editForm"
      >
        <el-form-item label="收货人:" prop="contactName">
          <el-input maxlength="30" show-word-limit v-model.trim="editForm.contactName"></el-input>
        </el-form-item>
        <el-form-item label="联系电话:" prop="contactPhone">
          <el-input maxlength="11" show-word-limit v-model.trim="editForm.contactPhone"></el-input>
        </el-form-item>
        <el-form-item label="所在地区:" prop="countyCode">
          <Area class="areaselect-adjust" ref="area" @getArea="getArea1"></Area>
        </el-form-item>
        <el-form-item label="详细地址:" prop="detailAddress">
          <el-input maxlength="50" show-word-limit v-model.trim="editForm.detailAddress"></el-input>
        </el-form-item>
          <div class="content-more">
              <el-form-item label="经度纬度:" prop="lng">
                  <el-input maxlength="20" show-word-limit v-model.trim="editForm.lng" placeholder="请输入经度"></el-input>
              </el-form-item>
              <el-form-item prop="lat">
                  <el-input maxlength="20" show-word-limit v-model.trim="editForm.lat" placeholder="请输入纬度"></el-input>
                  <span>
<!--                        <el-link icon="el-icon-search" @click="openBMap" type="danger" :underline="false">地图标点</el-link>-->
                    </span>
              </el-form-item>
          </div>
          <el-form-item class="map-mark">
              <el-link icon="el-icon-search" @click="openBMap" type="danger" :underline="false">地图标点</el-link>
          </el-form-item>
        <el-form-item label="默认地址:" prop="isDefault">
          <el-switch
            v-model="editForm.isDefault"
            active-value="1"
            inactive-value="0"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="doSubmit()" v-noMoreClick
        >确定</el-button
        >
        <el-button size="small" @click="close('edit')">取消</el-button>
      </span>
    </el-dialog>
    </div>
      <el-dialog
          class="mapDialog tableDialog"
          title="搜索地点"
          width="980px"
          :close-on-click-modal="false"
          v-dialogDrag
          :visible.sync="mapVisible"
      >
          <BMap ref="BMap"
                v-on:getlngAndlat="getlngAndlat"></BMap>

      </el-dialog>
  </div>
</template>
<script>
  import { editCompanyArea, getCompanyArea, deleteAddress } from '@/api/market/crm.js'
  import Area from '@/components/area/area'
  import BMap from '@/components/BMap/BMap'
  export default {
    components: {
      Area,
      BMap
    },
    data () {
      return {
        page: {
          pageSize: 10,
          pageNo: 1,
          total: 0
        },
        method: '',
        title: '',
        editTitle: '',
        mapVisible: false,
        loading: false,
        tableData: [],
        addressForm: {
          names: '',
          companyId: ''
        },
        editForm: {
          countyCode: '',
          detailAddress: '',
          isDefault: '',
          contactName: '',
          companyId: '',
          contactPhone: '',
          id: '',
          lng: '',
          lat: ''
        },
        editVisible: false,
        viewVisible: false,
        dataRule: {
          isDefault: [{ required: false, message: '请选择', trigger: 'change' }],
          countyCode: [
            { required: true, message: '请输入公司所在地区', trigger: 'blur' }
          ],
          contactPhone: [
            { required: true, message: '请输入联系人电话', trigger: 'blur' },
            {validator:this.checkPhoneNumber, trigger:'blur'}
          ],
          contactName: [
            { required: true, message: '请输入联系人姓名', trigger: 'blur' },
            { max: 10, message: '最大长度是10个字符', trigger: 'blur' }
          ],
          detailAddress: [
            { required: true, message: '请输入详细地址', trigger: 'blur' },
            { max: 50, message: '最大长度是50个字符', trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      handleSizeChange (e) {
        this.page.pageSize = e
        this.getList(this.page, this.addressForm.companyId)
      },
      handleCurrentChange (e) {
        this.page.pageNo = e
        this.getList(this.page, this.addressForm.companyId)
        console.log(e)
      },
    	handleClose(done) {
				this.$Msg.confirm({
					title:'您确定要关闭吗？',
					content:this.GLOBAL.FORM_CLOSE_TIPS,
					confirmCall:()=>{
						done();
					}
				})
			},
      // 校验手机号
      checkPhoneNumber (rule, value, callback) {
        if (value && (!(/^[1][34578]\d{9}$/).test(value) || !(/^[1-9]\d*$/).test(value) || value.length !== 11)) {
          callback(new Error('手机号码不符合规范'))
        } else {
          callback()
        }
      },
      init (method, addressForm) {
        if (method === 'view') {
          this.viewVisible = true
          let addressFormBuffer = {
            names: addressForm.names,
            companyId: addressForm.id
          }
          this.addressForm = addressFormBuffer
          this.editForm.companyId = addressFormBuffer.companyId
          this.getList(this.page,this.addressForm.companyId)
          this.addressForm.id = ''
          this.addressForm.addressId = ''
          this.title = '查看收货地址'
        } else if (method === 'add') {
          this.editForm.id = ''
          this.editTitle = '新增收货地址'
          this.editVisible = true
          let that = this
          this.$nextTick(() => {
            this.$refs.editForm.resetFields()
            this.editForm = {}
            this.editForm.companyId = addressForm.companyId
            console.log('新增收货地址')
            console.log(this.editForm.companyId)
            that.$refs.area.province = ''
            that.$refs.area.city = ''
            that.$refs.area.district = ''
          })
        } else if (method === 'edit') {
          this.editVisible = true
          this.editForm.id = addressForm.id
          this.editForm.countyCode = addressForm.countyCode
          this.editForm.contactPhone = addressForm.contactPhone
          this.editForm.companyId = addressForm.companyId
          this.editForm.contactName = addressForm.contactName
          this.editForm.isDefault = addressForm.isDefault
          this.editForm.detailAddress = addressForm.detailAddress
          let area = JSON.parse(this.editForm.countyCode)
          let that = this
          this.$nextTick(() => {
            that.$refs.area.province = area.province
            that.$refs.area.city = area.city
            that.$refs.area.district = area.district
          })
          this.editTitle = '修改收货地址'
        }
      },
      del (id) {
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then((res) => {
          deleteAddress({id: id}).then(res => {
            if (res.data.code === '200') {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              this.getList(this.page,this.addressForm.companyId)

              this.$emit('refreshDataList')
            }
          })
        })
      },
      // this.addressForm.companyId
      getList (params, companyId) {
        this.loading = true
        getCompanyArea({
          companyId: companyId,
          pageSize: params.pageSize,
          pageNo: params.pageNo,
          orderBy: 'is_default',
          orderByAORC: 'desc'
        }).then((res) => {
          if (res.data.code === '200') {
            this.tableData = res.data.result.list
            this.page.total = res.data.result.count
            console.log(this.tableData)
          }
          this.loading = false
          console.log(res.data)
        })
      },

      getArea1 (e) {
        if (e.province !== '' && e.city !== '' && e.district !== '') {
          this.editForm.countyCode = JSON.stringify(e)
        } else {
          this.editForm.countyCode = ''
        }
      },
      close (type) {
        if (type === 'edit') {
          this.editVisible = false
          return
        }
        this.viewVisible = false
      },
      doSubmit () {
        this.$refs['editForm'].validate((valid) => {
          if (valid) {
            if (
              this.editForm.countyCode !== '' &&
              typeof this.editForm.countyCode !== 'undefined'
            ) {
              console.log(this.editForm.countyCode)

              editCompanyArea(this.editForm).then((res) => {
                if (res.data.code === '200') {
                  this.$message({
                    message: '编辑成功',
                    type: 'success'
                  })
                  this.editVisible = false
                  this.$emit('refreshDataList')
                  this.getList(this.page,this.addressForm.companyId)
                }
              })
            }
          }
        })
      },
        // 打开地图弹窗
        openBMap() {
            this.mapVisible = true;
        },
        // 经纬度数据回显
        getlngAndlat(val) {
            this.mapVisible = false;
            this.editForm.lat = val.lat.toString();
            this.editForm.lng = val.lng.toString();
        },
      tableRowClassName ({ row, rowIndex }) {
        if (rowIndex % 2 === 1) {
          return 'warning-row'
        } else {
          return 'success-row'
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
    @import "@/assets/scss/config.scss";
    .editForm-wrapper ::v-deep.el-dialog__wrapper .el-dialog .el-dialog__body{
        .el-form{
            .el-radio__label{
                font-size: 16px;
            }
            .content-more{
                display: flex;
                .el-form-item{
                    margin-bottom: 0 !important;
                    .el-input__inner{
                        min-width: 155px !important;
                        width: 155px;
                    }
                }
                .el-form-item:last-child{
                    margin-left: 10px;
                    .el-form-item__content{
                        margin-left: 0 !important;
                        .el-link{
                            margin-left: 5px;
                        }
                    }
                }
            }
            .map-mark{
                margin-bottom: 5px !important;
            }
        }
    }
  .title {
    font-size: 16px;
    font-weight: 400;
    color: #333333;
  }
  ::v-deep .el-dialog > .el-dialog__body {
      .default{
        color: $--color-primary-liyu;
          margin-left: 20px;
      }
    /*padding: 15px 20px !important;*/
    /*padding-bottom: 15px;*/
    /*padding-bottom: 10px !important;*/
    /*font-size: 16px !important;*/
    /*overflow: auto;*/
    /*color: #333333 !important;*/

    p{
      margin: 0;
    }
    .title{
      display: flex;
      p:first-child{
        flex: 1;
        line-height: 30px;
      }
    }
  }
  /*.el-table .success-row {*/
  /*  background: #f0f9eb;*/
  /*}*/
  /*::v-deep .el-table .warning-row {*/
  /*  background: #f7f7f7;*/
  /*}*/
  .container2 {
  }
  /*.container2 :nth-child(2) ::v-deep .el-dialog {*/
  /*  top: 25%;*/
  /*}*/
</style>
